<!-- 模板 -->
<template>
  <div class="login">
    <!-- 1、logo图 -->
    <img src="../assets/img/logo1.png" alt="" class="logo" />
    <!-- 2、表单 -->
    <div class="login-form">
      <!-- <h3 class="title">Login</h3> -->
      <van-cell-group>
        <van-field
          label="用户名"
          v-model="loginUser.name"
          border
          right-icon="user-circle-o"
          label-width="1.2rem"
          placeholder="输入用户名"
          error-message-align="right"
        ></van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          @click-right-icon="handleType"
          label="密码"
          :type="type"
          :right-icon="eye"
          v-model="loginUser.pass"
          label-width="1.2rem"
          placeholder="输入密码"
        ></van-field>
      </van-cell-group>
      <div class="btn">
        <van-button type="primary" @click="login">登录</van-button>
      </div>
    </div>
    <!-- 3、公司理念 -->
    <h3 class="idea">家装·家居 引领者</h3>
  </div>
</template>

<script>
import { request } from '../utils/request'
export default {
  name: '',
  data() {
    return {
      loginUser: {
        name: 'tom',
        pass: 'tom123',
      },
      eye: 'closed-eye',
      type: 'password',
      isColsed: true,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //单击切换密码的显示和隐藏
    handleType() {
      this.isColsed = !this.isColsed
      if (!this.isColsed) {
        this.eye = 'eye-o'
        this.type = ''
      } else {
        this.eye = 'closed-eye'
        this.type = 'password'
      }
    },
    //点击登录
    async login() {
      let option = {
        url: 'users/login',
        type: 'post',
        data: this.loginUser,
      }
      let { data: res } = await request(option)
      console.log(res)
      if (res.code !== 200) {
        return this.$toast.fail(res.msg)
      }
      //显示提示框
      this.$toast.success(res.msg)
      //保存登录成功的用户信息
      sessionStorage.setItem('login_user', JSON.stringify(res))
      //页面跳转
      this.$router.push('/home')
    },
  },
  created() {},
  mounted() {},
}
</script>

<style lang="less" scoped>
.idea {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.5rem;
  width: 100%;
  text-align: center;
}
.logo {
  width: 3rem;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0.2rem;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/img/bk.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // border: 1px solid black;
  position: relative;
}
.login-form {
  padding: 0 0.8rem;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  .btn {
    height: 1rem;
    .van-button {
      width: 100%;
      height: 100%;
      font-size: 0.32rem;
      letter-spacing: 20px;
      font-weight: 700;
      border-radius: 0.1rem;
      line-height: 0.8rem;
    }
  }

  .van-cell-group {
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.1rem;
    margin-bottom: 0.6rem;
    .van-cell {
      line-height: unset;
      border-radius: 0.1rem;
      font-size: 0.32rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align-last: justify;
    }
  }
}
</style>
